<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Demo</title>
    <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
    <link href="/node_modules/layui/dist/css/layui.css" rel="stylesheet">
</head>
<body style="max-width: 500px;max-height: 400px">
<!-- 给容器追加 class="layui-form-pane"，即可显示为方框风格 -->
<form class="layui-form layui-form-pane" action="">
    <input name="id" th:value="${model.accountId}" type="hidden" >
    <div class="demo-login-container">
<!--        <div class="layui-form-item">-->
<!--            <label class="layui-form-label">源作者名称</label>-->
<!--            <div class="layui-input-inline">-->
<!--                <input type="text" name="source_author_name" th:value="${model.name}" autocomplete="off" placeholder="请输入" lay-verify="required"-->
<!--                       class="layui-input">-->
<!--            </div>-->
<!--        </div>-->
        <input type="hidden" name="accountId" th:value="${model.accountId}">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label ">源作者主页</label>
                <div class="layui-input-inline ">
                    <input type="text" name="url" th:value="${model.url}" autocomplete="off" placeholder="请输入" lay-verify="required"
                           class="layui-input ">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">平台</label>
                <div class="layui-input-inline">
                    <select  name="platform" lay-verify="required">
                        <option value="" th:if="${model.platform == null}">请选择平台</option>
                        <option th:each="item : ${platforms}"
                                th:value="${item.platformName}"
                                th:text="${item.platformName}"
                                th:selected="${item.platformName == model.platform}"></option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">语言</label>
                <div class="layui-input-inline">
                    <select id="language" name="language" lay-verify="required">
                        <option th:if="${model.language != null}" th:value="${model.language}" th:text="${model.language}"></option>
                        <option th:unless="${model.language != null}" value="">请选择语言</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">待翻译语言</label>
                <div class="layui-input-inline">
                    <select id="toLanguage" name="toLanguage" lay-verify="required">
                        <option th:if="${model.toLanguage != null}" th:value="${model.language}" th:text="${model.toLanguage}"></option>
                        <option th:unless="${model.toLanguage != null}" value="">相同则不进行翻译</option>
                    </select>
                </div>
            </div>


        </div>


        <div id="platform" th:attr="data-array-length=${model.outers.size()}" th:each="item ,itemStat : ${model.outers}" th:with="index=${itemStat.index}">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label th:attr="id='platformName'+${index}" class="layui-form-label" th:text="${item.platformName}"></label>
                    <div class="layui-input-block">
                        <input th:attr="name='outerId' + ${index}" type="text" th:value="${item.outerId}" hidden>
                        <input th:attr="name='platformId' + ${index}" type="text" th:value="${item.platformId}" hidden>

                        <input th:attr="name='userAccount' + ${index}" type="text" th:value="${item.userAccount}" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">密码</label>
                    <div class="layui-input-inline">
                        <input type="text" th:attr="name='userPwd' + ${index}" th:value="${item.userPwd}" autocomplete="off" class="layui-input">
                    </div>
                </div>
<!--                <div class="layui-inline">-->
<!--                    <label class="layui-form-label">语言</label>-->
<!--                    <div class="layui-input-inline">-->
<!--                        <input type="text" th:attr="name='language' + ${index}" th:value="${item.language}"  autocomplete="off"-->
<!--                               class="layui-input">-->
<!--                    </div>-->
<!--                </div>-->
            </div>
        </div>



        <div class="layui-form-item">
            <button class="layui-btn" lay-submit lay-filter="demo2">确认</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<script src="/node_modules/layui/dist/layui.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>



<script >
    // 定义语言数组
    var languages = ["中文", "英文"];

    // 获取选择框的引用
    var languageSelect = document.getElementById('language');
    var toLanguageSelect = document.getElementById('toLanguage');

    // 动态生成选项
    languages.forEach(function(language) {
        var option = document.createElement('option');
        option.value = language;
        option.text = language;
        languageSelect.add(option);

        var optionClone = option.cloneNode(true);
        toLanguageSelect.add(optionClone);
    });



    layui.use(['form','jquery'], function () {
        var form = layui.form;
        var $ = layui.jquery;
        var layer = layui.layer;
        // 提交事件
        var index = parent.layer.getFrameIndex(window.name);//获取窗口索引
        parent.layer.iframeAuto(index);
        // console.log('窗口索引值',index);
        var arrayLength = $('#platform').data('array-length');




        form.on('submit(demo2)', function (data) {

            var loadingIndex = layer.load(0, {shade: false});

            var field = data.field; // 获取表单字段值
            var AdminShowOuter = [];
            for (var i = 0;i < arrayLength; i++){

                var tempName = document.getElementById('platformName'+i).innerText;

                if(field['userAccount'+i] !== ''){
                    if(field['userPwd'+i] === ''){
                        layer.msg('" '+tempName + ' "' +'的密码不能为空', {icon: 5});
                        layer.close(loadingIndex);
                        return false;
                    }

                }else{
                    break;
                }

                var temp = {
                    "outerId": field['outerId' + i ],
                    "platformId": field['platformId' + i],
                    "userAccount": field['userAccount' + i],
                    "userPwd": field['userPwd' + i],
                    // "language":field['language' + i]
                }


                AdminShowOuter.push(temp);
            }

            // console.log("AdminShowOuter : ",AdminShowOuter);
            var uploadData = {
                "platform": field.platform,
                "accountId": field.id ,
                "url": field.url,
                "outers": AdminShowOuter,
                "language" : field.language,
                "toLanguage" : field.toLanguage,
            }
            console.log("upload ; ",uploadData);
            var upload = JSON.stringify(uploadData);
            $.ajax({
                type: 'POST',
                url: "/account/upload",
                contentType: "application/json;charset=utf-8",
                data: JSON.stringify(uploadData),
                // contentType: "application/json;charset=utf-8",
                success: function (data) {
                    console.log("data:",data)
                    layer.close(loadingIndex);
                    if(data.code === 0){
                        layer.msg('修改成功', {
                            icon: 1,
                            time: 1500
                        });
                        setTimeout(function () {
                            parent.layer.close(index);
                        }, 1100);
                    }
                    if(data.code === -1) {

                        layer.msg('保存错误：'+data.msg, {
                            icon: 2,
                            time: 1500
                        });
                    }
                },
                error: function (data) {
                    layer.close(loadingIndex);
                    console.log("res : ",data);
                    layer.msg(data.msg, {
                        icon: 0,
                        time: 1000
                    });
                    setTimeout(function () {
                        parent.layer.close(index);
                    }, 1100);
                },
            })

            return false; // 阻止默认 form 跳转
        });
    });
</script>

</body>
</html>
